<template>
  <div class="login">
    <el-form ref="register-form" :model="registerForm" :rules="registerRules" label-position="left" label-width="0px" class="register-form">
      <h3 class="title">爱豆优教 用户注册</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="请输入手机号">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;color: #409eff;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="registerForm.password" :type="pwdType" auto-complete="off" placeholder="请输入密码">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;color: #409eff;" />
          <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;" class="el-icon-view"></i>
        </el-input>
      </el-form-item>
      <el-form-item label="" prop="captcha_code">
        <el-input v-model="registerForm.captchaCode" placeholder="验证码" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="4" 
          @keyup.enter.native="handleRegister" style="float: left; width: 150px;">
          <svg-icon slot="prefix" icon-class="yanzhengma" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;color: #409eff;"/>
        </el-input>
        <div class="captchaCode" style="float: right;cursor: pointer">
          <img src="" ref="code" @click="changeCode">
        </div>
      </el-form-item>
      <el-form-item style="width:100%;margin:0">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleRegister">
          <span v-if="!loading">注 册</span>
          <span v-else>提 交 中...</span>
        </el-button>
      </el-form-item>
      <div class="other">
        <el-button type="text" class="rg" @click.native.prevent="onLogin">立即登录</el-button>
      </div>
    </el-form>

    <img :src="login_center_bg" class="login-center-layout">
    <div class="footer">
      <div class="links">
        <a href="_self">帮助</a>
        <a href="_self">隐私</a>
        <a href="_self">条款</a>
      </div>
      <div class="copyright">
        Copyright © 2019-2022 上海视浦科技有限公司
      </div>
    </div>
  </div>
</template>

<script>
import login_center_bg from '@/assets/login_center_bg.png'
import { register } from '@/api/login'

export default {
  name: 'register',
  data() {
    return {
      registerForm: {
        username: '',
        password: '',
        captchaKey: '',
        captchaCode: ''
      },
      registerRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
      },
      pwdType: 'password',
      loading: false,
      redirect: undefined,
      login_center_bg
    }
  },
  methods: {
    onLogin() {
      this.$router.push({ path: '/login' })
    },
    changePass() {
      this.pwdType === "password" ? (this.pwdType = "") : (this.pwdType = "password");
      let e = document.getElementsByClassName("el-icon-view")[0];
      this.pwdType == ""? e.setAttribute("style", "color: #c0c4cc") : e.setAttribute("style", "color: #409EFF");
    },
    getCaptchaKey() {
      let captchaKey = Math.random().toString(36).substring(2)
      return captchaKey
    },
    changeCode() {
      let captchaKey = this.getCaptchaKey();
      this.registerForm.captchaKey = captchaKey;
      this.$refs.code.setAttribute(
        "src",
        process.env.BASE_API + "/api/captcha?key=" + captchaKey
      )
    },
    handleRegister() {
      this.loading = true
      let para = {
        mobile: this.registerForm.username,
        password: this.registerForm.password,
        captcha: this.registerForm.captchaCode,
        key: this.registerForm.captchaKey
      }
      register(para).then(res => {
        this.loading = false
        if (res.code == 0) {
          this.$message({
            message: '注册成功, 跳转至登录界面',
            type: 'success'
          })
          this.$router.push({ path: '/login' })
        } else {
          this.$message({
            message: '注册失败，请联系官方客服！',
            type: 'warning'
          })
        }
      }).catch(err => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.changeCode()
  }
}
</script>


<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #f0f2f5;
    background-size: 100%;
    padding: 110px 0 144px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .title {
    margin: 0px auto 80px auto;
    text-align: center;
    color: #707070;
  }
  .register-form {
    border-radius: 2px;
    background: #ffffff;
    width: 365px;
    padding: 25px;
    position: absolute;
    border-top: 10px solid #409eff;
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
  }
  .login-center-layout {
    background: #409EFF;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;
    .links {
      margin-bottom: 8px;
      font-size: 14px;
      a {
        color: rgba(0,0,0,.45);
        transition: all .3s;
        margin-right: 40px;
      }
    }
    .copyright {
      color: rgba(0,0,0,.45);
      font-size: 14px;
    }
  }
  .other {
    display: flex;
    .rg {
      flex: 1;
      color: #6f7078;
    }
    :hover {
      color: #409EFF;
    }
  }
</style>
